<template>
  <SeachTable
    :tableType="1"
    ref="seachTableRef"
    class="mySeachTable"
    :forms="tableForms"
    :btnLefts="btnLefts"
    :btnRights="btnRights"
    :tableLoading="tableLoading"
    :tableConfig="tableConfig"
    :tableData="tableData"
    :totalPage="totalPage"
    @handlerSearch="handlerSearch"
  >
    <template #layeringNumber="{row}">
      <span @click="toPage(row)" style="color: #3480FF;cursor: pointer;">{{ row.layeringNumber }}</span>
    </template>
  </SeachTable>
  <EditDialog @close="closeEditDialog" :detail="dialogData" :show="showEditDialog" />
</template>

<script setup>
import { memberLayeringDragSort } from '@/api/Member/index';
import { useCurd,useMemberLayering } from './Hooks/index';
import { useMemberQuery } from '@/views/OperateManagement/MemberManagement/MemberChildManagement/Hooks/index'
import EditDialog from './Components/EditDialog.vue';

const {
  tableLoading,
  totalPage,
  tableData,
  btnLefts,
  btnRights,
  tableConfig,
  tableForms,
  handlerSearch,
  dialogData,
  showEditDialog,
  closeEditDialog
} = useCurd();
const {
  seachTableRef
} = useMemberLayering();
const sortId = ref(0);
const drawHandle = async (newIndex,oldIndex)=>{
  if(newIndex !== oldIndex){
    try{
      tableLoading.value = true;
      let idList = tableData.value.map(item=>item.id)
      const oldValue = idList[oldIndex]
      // const newValue = idList[newIndex]
      // idList[newIndex] = oldValue
      // idList[oldIndex] = newValue
      idList.splice(oldIndex,1)
      idList.splice(newIndex,0,oldValue)
      await memberLayeringDragSort(idList)
      sortId.value++
    }finally{
      tableLoading.value = false;
    }
  }
}

const router = useRouter()
const { memberQuery } = useMemberQuery()
const toPage = (row)=>{
  router.push({
    path:'/operateManagement/memberManagement/memberChildManagement/memberChildManagementIndex',
  });
  memberQuery.value.memberLayerId = row.id;
}
</script>

<style lang="less" scoped>
.mySeachTable{
  :deep(.search-table){
    .line-block,.jg{
      display: none;
    }
  }
}
</style>